<script lang="ts" setup>
import api from "@/api";
import { onMounted, reactive, ref } from "vue";
import { type PageDTO, type ScriptTemplateDTO, ScriptTemplatePageQry } from "@/types";
import ScriptTemplateSave from "./ScriptTemplateSave.vue";
import { useDelete } from "@/hooks";

const scriptTemplateSaveRef = ref<InstanceType<typeof ScriptTemplateSave>>();

interface State {
  loading: boolean;
  qry: ScriptTemplatePageQry;
  result: PageDTO<ScriptTemplateDTO>;
}

const state = reactive<State>({
  loading: false,
  qry: new ScriptTemplatePageQry(),
  result: {
    current: 1,
    data: [],
    size: 10,
    totalPage: 1,
    totalSize: 0
  }
});

const loadData = () => {
  state.loading = true;
  api.scriptTemplate
    .getScriptTemplatePage(state.qry)
    .then((res) => {
      state.result = res.data;
    })
    .finally(() => {
      state.loading = false;
    });
};

const reset = () => {
  state.qry = new ScriptTemplatePageQry();
  loadData();
};

const handleDelete = (id: string) => {
  useDelete(() => api.scriptTemplate.deleteScriptTemplate(id)).then(loadData);
};

const handleSave = (id?: string) => {
  scriptTemplateSaveRef.value?.openDialog(id);
};

const handlePageSizeChange = () => {
  state.qry.current = 1;
  loadData();
};

onMounted(() => {
  loadData();
});
</script>
<template>
  <el-form
    :model="state.qry"
    :inline="true"
    label-width="110px"
    class="crm-content__search overwrite-form"
  >
    <div class="crm-content__search__condition">
      <div class="crm-content__search__condition__main">
        <el-form-item label="名称：" class="el-form-item-width">
          <el-input v-model="state.qry.nameLike" @keydown.enter="loadData" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="标签：" class="el-form-item-width">
          <el-input v-model="state.qry.tagLike" @keydown.enter="loadData" placeholder="请输入" />
        </el-form-item>
        <div></div>
      </div>
    </div>
    <div class="crm-content__search__control">
      <el-button type="primary" @click="loadData" icon="Search"> 查询 </el-button>
      <el-button @click="reset" icon="Refresh"> 重置 </el-button>
    </div>
  </el-form>
  <div p-2>
    <el-button type="primary" @click="handleSave()">新建</el-button>
  </div>
  <el-table flex-1 :data="state.result.data"
            border
            stripe
            resizable
            style="width: 100%" v-loading="state.loading">
    <el-table-column type="index" width="50" label="#"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="tag" label="标签"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleSave(scope.row.id)"> 编辑 </el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    size="small"
    background
    layout="total, prev, pager, next, sizes, jumper"
    :total="state.result.totalSize"
    v-model:page-size="state.qry.size"
    v-model:current-page="state.qry.current"
    @update:current-page="loadData"
    @update:page-size="handlePageSizeChange"
    p-5
  />
  <script-template-save ref="scriptTemplateSaveRef" @success="loadData" />
</template>
